<%@ include file="../common/IncludeTop.jsp"%>
<form action="editAccount" method="post">
    <div id="Catalog">

        <h3>User Information</h3>

        <table>
            <tr>
                <td colspan="2" align="center">
                    <font color="red">${requestScope.msg}</font><br>
                </td>
            </tr>
            <tr>
                <td>User ID:</td>
                <td><input type="text" name="username" value="${sessionScope.loginUser.username}" disabled /></td>
            </tr>
            <tr>
                <td>New password:</td>
                <td><input type="password" name="password" id="Modifypassword"/></td>
            </tr>
            <tr>
                <td>Repeat password:</td>
                <td><input type="password" name="repeatedPassword" id="Modifyrepeatpassword" />
                    <span id="PasswordCheck"></span>
                </td>
            </tr>
            <style>

                .ok{
                    color: Green;
                }
                .error{
                    color: red;
                }

            </style>
            <script>
                $('#Modifyrepeatpassword').on('blur',function (){
                    console.log($('#Modifypassword').val());
                    console.log(this.value);
                    // console.log(newpassword);
                    if(this.value===$('#Modifypassword').val())
                    {
                        $('#PasswordCheck').attr("class","ok").text("Available");
                    }
                    else{
                        $('#PasswordCheck').attr("class","error").text("Unavailable");
                    }
                });

            </script>
        </table>
        <%@ include file="IncludeAccountFields3.jsp"%>

        <input type="submit" name="editAccount" value="Save Account Information" />

    </div>

    <%@ include file="../common/IncludeBottom.jsp"%>
